<template>
  <div class="bret">
    <GongYong class="header"></GongYong>
    <main>
      <div class="content">
        <div class="content_input">
          <div class="inppt">
            <p>规格搜索：</p>
            <el-input v-model="input" placeholder="请输入商品规格"></el-input>
            <el-button
              type="info"
              plain
              icon="el-icon-search"
              @click="kwywor"
            ></el-button>
          </div>
        </div>
        <div class="content_button">
          <el-button type="primary" @click="addList()">添加商品规格</el-button>

          <el-dialog title=" 属性规格" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="规格名称" :label-width="formLabelWidth">
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  placeholder="请输入标题名称"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-form :model="form">
              <el-form-item label="规格" :label-width="formLabelWidth">
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  placeholder="请输入规格"
                ></el-input>
              </el-form-item>
              <el-form-item label="规格值" :label-width="formLabelWidth">
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  placeholder="请输入规格值"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-dialog
              width="60%"
              title="属性规格"
              :visible.sync="innerVisible"
              append-to-body
            >
              <el-form :model="form">
                <el-form-item label="规格名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    autocomplete="off"
                    placeholder="请输入标题名称"
                  ></el-input>
                </el-form-item>
                <div class="butt">
                  <p>消耗 x</p>
                  <div class="vret">
                    <el-tag
                      :key="tag"
                      v-for="tag in dynamicTags"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(tag)"
                    >
                      {{ tag }}
                    </el-tag>
                    <el-input
                      class="input-new-tag"
                      v-if="inputVisible"
                      v-model="inputValue"
                      ref="saveTagInput"
                      size="small"
                      @keyup.enter.native="handleInputConfirm"
                      @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button
                      v-else
                      class="button-new-tag"
                      size="small"
                      @click="showInput"
                      >+添加</el-button
                    >
                  </div>
                  <el-button
                    type="primary"
                    class="buttone"
                    @click="addListe = false"
                    >添加新规格</el-button
                  >
                </div>
              </el-form>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
              <el-button @click="outerVisible = false">取 消</el-button>
              <el-button type="primary" @click="innerVisible = true">
                确定</el-button
              >
            </div>
          </el-dialog>
          <el-button @click="delectAll">批量删除</el-button>
        </div>

        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
          border
          @selection-change="handleSelectionChang"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="ID" width="80"> </el-table-column>
          <el-table-column prop="title" label="规格名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="word" label="商品规格" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="price" label="商品属性" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="edit(scope.row, tableData)"
                type="text"
                size="small"
              >
                编辑
              </el-button>
              <el-button
                @click.native.prevent="deletae(scope.row.id)"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </main>
  </div>
</template>

<script>
import GongYong from "./gongyong.vue";
import axios from "axios";
export default {
  name: "Bret",
  components: {
    GongYong,
  },
  data() {
    return {
      dynamicTags: ["500w"],
      inputVisible: false,
      inputValue: "",
      tableData: [],
      total: 2, //总页
      currentPage: 1, //初始页
      pagesize: 8, //每页数据
      multipleSelection: [],
      input: "", //搜索
      outerVisible: false,
      innerVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        title: "",
        price: "",
        word: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    axios.get("http://127.0.0.1:7001/getList").then((res) => {
      this.tableData = res.data.data;
      console.log("res...", res.data.data);
    });
  },
  methods: {
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    //搜索
    kwywor() {
      axios
        .get(`http://127.0.0.1:7001/getList/?keyword=${this.input}`)
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    //添加
    addList() {
      this.dialogFormVisible = true;
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //批量删除
    delectAll() {
      for (let i = 0; i < this.tableData.length; i++) {
        const element = this.tableData[i];
        element.id = i;
      }
      if (this.multipleSelection.length == 0)
        this.$message.error("多选俩，那么抠搜干啥");
      this.multipleSelection.forEach((element) => {
        this.tableData.forEach((e, i) => {
          if (element.id == e.id) {
            this.tableData.splice(i, 1);
          }
        });
      });
    },
    //单个删除
    deletae(id) {
      axios.delete(`http://127.0.0.1:7001/delete/${id}`).then((res) => {
        this.$router.go("0");
      });
    },
    handleSelectionChang(val) {
      this.multipleSelection = val;
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
};
</script>

<style scoped lang="scss">
.bret {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #efefef;
}
.input {
  width: 50%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  p {
    width: 100px;
  }
}
main {
  flex: 1;
}
.content_input {
  width: 100%;
  padding: 10px 0;
  background: #fff;
  .inppt {
    width: 30%;
    display: flex;
    align-items: center;
    p {
      width: 100px;
    }
  }
}
.content_button {
  width: 100%;
  background: #fff;
  padding: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
  padding: 0 60px;
}
.butt {
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  padding: 0 60px;
  p {
    height: 30px;
  }
  .vret {
    height: 50px;
  }
  .buttone {
    width: 100px;
  }
}
.el-pagination{
  padding: 20px 0;
}
</style>